<template>
  <div class="equipment-analysis-view">
    <h1>设备分析</h1>
    <div class="charts-container">
      <div class="chart-item">
        <h3>设备类型分布</h3>
        <div class="chart-wrapper">
          <v-chart :option="equipmentTypeOption" autoresize />
        </div>
      </div>
      <div class="chart-item">
        <h3>区域供电容量分布</h3>
        <div class="chart-wrapper">
          <v-chart :option="zoneCapacityOption" autoresize />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { getEquipmentAnalysisData } from '@/apis/analyticsAPI'
import VChart from 'vue-echarts'
import { use, graphic } from 'echarts/core'
import {
  CanvasRenderer,
  SVGRenderer
} from 'echarts/renderers'
import {
  PieChart,
  BarChart
} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  ToolboxComponent
} from 'echarts/components'

// 注册必须的组件
use([
  CanvasRenderer,
  SVGRenderer,
  PieChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  ToolboxComponent
])

// 设备类型映射
const equipmentTypeMap = {
  0: '变压器',
  1: '开关柜',
  2: '配电箱',
  3: '电表'
}

// 数据引用
const equipmentData = ref({
  equipmentTypeDistribution: [],
  zoneCapacityData: []
})

// 设备类型分布图表配置
const equipmentTypeOption = computed(() => {
  const pieData = equipmentData.value.equipmentTypeDistribution.map(item => ({
    name: equipmentTypeMap[item.equipmentType] || '未知类型',
    value: item.count
  }))
  
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      data: pieData.map(item => item.name)
    },
    series: [
      {
        name: '设备类型',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: pieData
      }
    ]
  }
})

// 区域供电容量分布图表配置
const zoneCapacityOption = computed(() => {
  const barData = equipmentData.value.zoneCapacityData
  
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function(params) {
        const data = params[0]
        return `${data.name}<br/>供电容量: ${data.value} kVA`
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: barData.map(item => item.zoneName),
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          rotate: 45
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '供电容量 (kVA)'
      }
    ],
    series: [
      {
        name: '供电容量',
        type: 'bar',
        barWidth: '60%',
        data: barData.map(item => item.totalCapacity),
        itemStyle: {
          borderRadius: [5, 5, 0, 0],
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        }
      }
    ]
  }
})

onMounted(async () => {
  try {
    const response = await getEquipmentAnalysisData()
    equipmentData.value = response.data
  } catch (error) {
    console.error('获取设备分析数据失败:', error)
  }
})
</script>

<style scoped>
.equipment-analysis-view {
  padding: 20px;
}

.equipment-analysis-view h1 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.charts-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.chart-item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.chart-item h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #555;
}

.chart-wrapper {
  height: 400px;
  width: 100%;
}

@media (max-width: 768px) {
  .charts-container {
    grid-template-columns: 1fr;
  }
}
</style>